import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import PageTools from '@/components/index.js'

import App from './App'
import store from './store'
import router from './router'
import MyTime from '@/plugin/index.js'
import '@/icons' // icon
import '@/permission' // permission control

// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
Vue.use(PageTools)
Vue.use(MyTime)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 写需求(代码)的套路
/*
  ①明确需求,明确目标(要知道做完的效果是什么?想要什么)
  例如:做登录,最终效果,输入正好密码,点击登录,提示登录成功
  ②html+css->要的页面先准备下,(不要管js和功能),-铺页面
  ③铺设数据/改数据/校验/收集数据(v-model)->微调页面文字,有数据要请求铺设到页面上
  ④js入场编写交互功能,(小步一个个功能的实现)->逻辑(前端先做好)
  ⑤如果需要调用接口,在和后端配合,调用ajax->请求
*/

// UI组件/其他插件使用套路
/*
  ①明确需求,目标,要知道自己想要什么效果(组件库里找/github找/百度找/以前项目找)
  ②找组件:类似组件->看看有没有官网(有最好),没有看npmjs.com/github.com上readme所明书
  ③下载+引入组件:把组件弄到自己项目里,npm下载
  ④用组件:把基础代码复制过来
  ⑤读组件:把每个标签,嵌套关系,属性,事件,都写好注释弄明白->多看文档
  ⑥改组件:(改配置/属性/删除多余的)
*/

// 封装函数,什么时候需要参数,什么时候需要返回return
/*
  ①函数内,某个值自己内部不能确定/每次函数调用都不一样,必须留好形参让外传入
  ②函数调用处(外面),需要函数内部处理后的结果,必须return出去
*/

// 什么是跨域:
/*
  ①跨域是浏览器对ajax做出的同源策略限制
  ②同源指的是:网页在浏览器打开时,地址栏里的地址中的协议/域名/端口号,
      和内嵌的ajax请求的url地址中协议/域名/端口号有一个对不上就是跨域了
  注意:服务器和服务器之间的请求是没有跨域限制的
*/

// 如何解决跨域问题
/*
  方式1:JSONP
    注意:JSONP和JSON没有关系,JSON是一种序列化数据的技术,JSONP是解决跨域的技术
    使用:script标签的src属性,来发送请求而且它不受跨域限制,请求后让后台返回一个函数调用字符串+数据,在前端进入到script标签之间,当做js代码执行,把数据带回来
    特点:需要前端传递一个方法名,后端返回函数调用格式的字符串
    要求:前后端同时支持
*/
/*
  方式2:cors
    概念:跨域资源共享,现代浏览器前端默认支持的,但是还需要后端开启才行
    使用:cors是让后端进行设置
    特点:可以在响应头里看看有没有一个叫'Access-Control-Allow-Origin'字段(是后台设置的,作用:允许哪些源进行跨域访问)
    要求:前端什么都不用做,正常使用axios发送ajax请求,只需要后端开启(前端无需感知)
*/
/*
  方式3:代理服务器
    针对:后端不开跨域支持,前端自己用代理服务器也能拿到数据
    原理:前端代理服务器,请求后端接口服务器,因为服务器之间是没有跨域限制的
    好在:vue脚手架有一个webpack开发服务器支持,给这个服务器进行配置,让它支持代理转发
      1.让axios请求,不要直接请求外链地址(heep开头的),而是请求/开头的,代表当前所在服务器('http://localhost:9528')
      2.配置代理转发规则,vue.config.js中devServer的proxy选项内配置(让开发服务器支持代理转发)
    前提:后端真的有"接口地址"可以使用,才能用ajax请求(前后端分离的项目)
    特殊:后端渲染的项目(SSR/nuxt.js技术->新学vue语法),数据在后端渲染完毕返回给前端网页,不用使用ajax请求
*/

// 后端返回数据的类型
/*
  类型1:失败的请求,后台会返回400的http状态码(错误)
      'http状态码'来标记失败情况
  类型2:无论成功/失败请求,后端都会返回http状态码200(ok)
      但是在"数据的字段"上区别成功/失败
*/

// .native使用
/*
  前提:组件身上绑定"原生名字"事件,但是组件身上虽然名字是原生的,但是都需要组件内$emit触发才支持
  如果组件内不支持这个原生名字的事件
  知道:查看文档/试试,有的组件时支持一些原生事件名,就可以直接绑定使用
  解决:我们可以给组件的@原生名字事件.native->告诉vue给它绑定成原生事件,而不是自定义事件
  例如:<el-xxx @click.native='btnClick'></el-xxx>
*/

// 回调地狱
/*
  异步请求,ajax/axios都有回调函数onload/then()里函数体,在回调函数里拿结果
  拿到结果以后,在这个函数体里,再次发起请求,又会有一个函数体嵌入在这里,继续嵌套请求+回调函数...嵌套下去
  形成回调地狱
*/

// vue组件样式相关
/*
  ①运行时,选中标签,看右侧的style里样式被划线划掉了,优先级不够(权限)
  ②/deep/ 选中组件内的选择器,如果看右侧的style样式类名已经上去了,证明选中了
      和/deep/没关系,如果发现类名,写了,但是没有上去,运行时选择器没有选到组件内类名(/deep/)
    /deep/作用:把scope加的属性选择器加到类名的前面,选中组件内无属性的类名
  ③用错了,svg要用fill属性填充图标颜色,而不能用style影响颜色
*/
